import React, { useState } from "react";
import { Input, Checkbox, Tag, Button } from "antd";
import { DownOutlined, CloseOutlined } from "@ant-design/icons";
import type { TodosProps } from "@/stores/mobx/TodosStore/index.d";

const tagsData = ["All", "Active", "Completed"];

const Todos = ({
  filter,
  filteredTodos,
  activeTodoCount,
  addTodo,
  toggleTodo,
  removeTodo,
  setFilter,
  clearCompleted
}: TodosProps) => {
  const [inputValue, setInputValue] = useState("");
  const handlePressEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(e.currentTarget.value);
    if (inputValue.trim()) {
      addTodo && addTodo(inputValue);
      setInputValue(""); // 清空输入框
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <h1 className="text-[#b83f45] text-6xl text-center mb-4">todos</h1>
      {/* 输入框 */}
      <Input
        placeholder="What needs to be done?"
        className="p-4 border-none! rounded-none! shadow-sm"
        styles={{
          prefix: { marginRight: "12px" },
          input: { height: "52px", fontSize: "24px" },
        }}
        prefix={<DownOutlined />}
        size="large"
        value={inputValue}
        onChange={handleChange}
        onPressEnter={handlePressEnter}
      />
      {/* 待办列表 */}
      <ul className="bg-white">
        {filteredTodos.map((todo) => (
          <li
            key={todo.id}
            className="flex items-center p-4 border-b border-b-gray-200"
          >
            <Checkbox
              className="mr-2"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <div
              className={`flex-1 mx-2 text-2xl ${
                todo.completed ? "text-gray-400 line-through" : ""
              }`}
            >
              {todo.text}
            </div>
            <CloseOutlined
              style={{ color: "gray" }}
              onClick={() => removeTodo(todo.id)}
            />
          </li>
        ))}
      </ul>
      {/* 统计 */}
      <div className="flex items-center  justify-between p-4 border-b border-b-gray-200 bg-white">
        <span className="mr-4">{activeTodoCount} item{activeTodoCount > 1 ? "s" : ""} left</span>
        <span>
          {tagsData.map<React.ReactNode>((tag) => (
            <Tag.CheckableTag
              key={tag}
              checked={filter === tag}
              onChange={() => setFilter(tag)}
            >
              {tag}
            </Tag.CheckableTag>
          ))}
        </span>
        <Button variant="text" onClick={clearCompleted}>Clear Completed</Button>
      </div>
    </div>
  );
};

export default Todos;
